<template>
	<view class="content mainpadding">
		<view class="searchBox  flexbetween">
			<view class="flexleft">
				<u-icon name="search" color="#B5B5B5" size="20"></u-icon>
				<input class="margin_left1" type="text" placeholder="請輸入發票號碼" v-model="invoice_number"
					placeholder-style="font-size: 24rpx;font-weight: 500;color: #B5B5B5;" confirm-type="search" @confirm="init">
			</view>
			<view class="searchBtn" @click="init">搜索</view>
		</view>
		<calendarMonth ref="calendar" z-index="99999999" @changeMonth="changeMonth"></calendarMonth>
		<view class="text">
			發票共{{list.total}}張，已中獎{{total_zjnum}}張，總金額
			<text class="total_price">${{total_price}}</text>元
		</view>
		<view class="flexbetween dingwei" style="top: 10rpx;">
			<view class="flexcenter " :class="tab_type==item.value?'baisebj':'huangsebj'" v-for="item in toplist"
				:key="item.value" @click="tab_type=item.value;init()"
				style="width: 50%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
		</view>
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
		</view>
		<view class="mainpadding flexleft ffffff radius margin-top line_b dingwei" v-for="item in list.data" :key="item.id" @click="goInvoiceDetail(item.id)">
			<!-- 中獎圖片 -->
			<image src="@/static/images/system/zhongjiang.png" v-if="item.is_zj==1" style="width: 120rpx;height: 100rpx;position: absolute;top: 60rpx;right: 150rpx;" mode=""></image>
			<image class="invoiceImg margin_right3" :src="item.shop.logoimage_text" mode=""></image>
			<view class="flex1">
				<view class="flexbetween">
					<view class="flexleft" @click.stop="goShopInfo(item.shop.id)">
						<view class="color_san text_x margin_right1 xiankuan1">{{item.shop.name}}</view>
						<u-icon name="arrow-right" color="#333" size="12"></u-icon>
					</view>
					<text class="weikai" v-if="item.is_ly==1">未列印</text>
					<text class="yikai" v-if="item.is_ly==2">已列印</text>
				</view>
				<view class="flexbetween margin_top1">
					<view class="xiaohui text_b">{{item.createtime_text}}</view>
					<view class="xiaohong text_b" v-if="item.status==1">開具失敗</view>
					<view class="xiaolv text_b" v-if="item.status==2">開具成功</view>
					<view class="xiaohong text_b" v-if="item.status==3">作廢成功</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="color_san text_x ">{{item.OrderId}}</view>
					<view class="price">{{item.TotalAmount}}</view>
				</view>
				<view class="flexbetween margin_top1">
					<view class="xiaohui text_b lanlable" v-show="item.type==0">紙本</view>
					<view class="xiaohui text_b lanlable" v-show="item.type==1">載具：{{item.CarrierId1}}</view>
					<view class="xiaohui text_b lanlable" v-show="item.type==2">統編：{{item.BuyerIdentifier}}</view>
					<view class="xiaohui text_b lanlable" v-show="item.type==3">捐贈：{{item.NPOBAN}}</view>
					<view class="xiaolan text_b bold" v-if="item.invoice_number">{{item.invoice_number}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import calendarMonth from '@/components/calendarMonth.vue'
	export default {
		components: {
			'calendarMonth': calendarMonth,
		},
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				total_price: "",
				total_zjnum:"",
				yuefen: "",
				nextyue:"",
				invoice_number:"",
				tab_type: 2,
				toplist: [{
					name: '成功',
					value: 2,
				}, {
					name: '作廢',
					value: 3,
				}]
			}
		},
		methods: {
			goShopInfo(id) { //店鋪詳情
				uni.setStorageSync("shop_id", id)
				uni.navigateTo({
					url: "/pages_index/shopInfo?id=" + id
				})
			},
			returnfplx(val){
				if(val==0)return "紙本"
				if(val==1)return "載具"
				if(val==2)return "統編"
				if(val==3)return "捐贈"
			},
			changeMonth(e) {
				console.log(e);
				// 对应操作
				this.yuefen = e.year+"-"+e.month
				this.nextyue = e.year+"-"+e.nextmonth
				this.init()
				
			},
			getCurrentMonthLast(date) {
				var endDate = new Date(date); //date 是需要傳递的時間如：2018-08
				var month = endDate.getMonth();
				var nextMonth = ++month;
				var nextMonthFirstDay = new Date(endDate.getFullYear(), nextMonth, 1);
				var oneDay = 1000 * 60 * 60 * 24;
				var dateString = new Date(nextMonthFirstDay - oneDay);
				var dateArr = dateString.toLocaleDateString().split('/')
				return dateArr[dateArr.length - 1].split("-"); //toLocaleDateString() 返回 如：2018/8/31
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					start_time: this.yuefen + "-01",
					end_time: this.nextyue+"-"+this.getCurrentMonthLast(this.nextyue),
					invoice_number:this.invoice_number,
					status:this.tab_type
				}
				let url = '/api/user/userFpIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data.data
							_this.list.data = resList.data;
						}
						this.total_price = res.data.total_price
						this.total_zjnum = res.data.total_zjnum
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			goInvoiceDetail(id) { //發票明細
				uni.navigateTo({
					url: "/pages_mine/invoiceDetail?id="+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.xiankuan1 {
		max-width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.weikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: rgba(153, 153, 153, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 5rpx 30rpx;
	}
	.yikai{
		border-radius: 0 10rpx 0 10rpx;
		background-color: #50a6a3;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 5rpx 30rpx;
	}
	// 搜索框
	.searchBox {
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 5rpx 0 30rpx;
		position: relative;
		z-index: 100;
		.searchBtn {
			width: 124rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background: linear-gradient(312deg, #F8CF39 0%, #F8DA44 100%);
			border-radius: 65rpx 65rpx 65rpx 65rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}
	.monthImg {
		width: 34rpx;
		height: 34rpx;
	}

	.yearMonth {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		margin: 0 20rpx;
	}

	.total_price {
		color: rgba(255, 92, 0, 1);
	}

	.invoiceImg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.price {
		font-size: 32rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FF5C00;
	}
	
	.baisebj {
		box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 184, 0, 0.3);
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 15rpx !important;
		color: #333;
	}
	
	.huangsebj {
		background-color: #fafafa;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>